import React, { PureComponent } from 'react';
import { Upload, Icon } from 'antd';

export default class Image extends PureComponent {
    render() {
        const { imageUrl = '', loading, handleUpload } = this.props;

        const uploadButton = (
            <div style={{ height: '100%' }} onClick={() => { if (typeof handleUpload === 'function') handleUpload() }}>
                <Icon type={loading ? 'loading' : 'plus'} style={{ lineHeight: '86px' }} />
            </div>
        );

        return (
            <Upload
                className='avatar-uploader'
                listType='picture-card'
                openFileDialogOnClick={false}
                showUploadList={false}
            >
                {imageUrl ? <img src={imageUrl} alt='avatar' style={{ width: '100%' }} /> : uploadButton}
            </Upload>
        );
    }
}